<template>
  <div class="content-box">
    <div class="box-code">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
        border-card
      >
        <el-tab-pane label="文档" name="first" class="h-full">
          <MarkdownContainer
            :docText="rawReadmeContent"
            style="height: calc(100vh - 39px)"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="box-cesium">
      <div class="cesium-header">
        <el-button type="primary" size="small" @click="handleBackPage()"
          >返回</el-button
        >
        <div class="header-title">{{ options.title }}</div>
      </div>
      <div id="cesium-container">
        <Gui
          @staBtn="staBtn"
          @cloBtn="cloBtn"
          @sliChange="sliChange"
          :btnArray="btnArray"
          :title="title"
        >
          <template #slot-table>
            <el-table
              :data="tableData"
              @selection-change="handlerSelect"
              stripe
              style="width: 100%"
              height="200"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column
                prop="imgUrl"
                align="center"
                label="预览"
                show-overflow-tooltip
              >
                <template v-slot="scope">
                  <el-image :src="scope.row.imgUrl" />
                </template>
              </el-table-column>
              <el-table-column
                prop="label"
                align="center"
                label="标签"
                show-overflow-tooltip
              />
              <el-table-column
                prop="date"
                align="center"
                label="日期"
                show-overflow-tooltip
              />
              <!-- <el-table-column
                fixed="right"
                align="center"
                label="操作"
                min-width="100"
              >
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click.prevent="site(scope.row)"
                  >
                    定位
                  </el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </template>
        </Gui>
      </div>
      <el-dialog v-model="visible" title="书签预览" width="500">
        <el-image :src="imageSrc" />
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="submit"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, getCurrentInstance } from "vue";
import MarkdownContainer from "@/components/MarkdownContainer/index.vue";
import Gui from "@/components/Gui/index.vue";
import rawReadmeDoc from "./README.md?raw"; // 文档
import rawData from "./data"; // 配置的数据
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import { v4 as uuidv4 } from "uuid";

const router = useRouter();

const activeName = ref("first");
const rawReadmeContent = ref(rawReadmeDoc);
const options = ref(rawData);
const handleClick = (tab, event) => {
  console.log(tab, event);
};
const handleBackPage = (path) => {
  if (path) {
    router.push(path);
  } else {
    router.back();
  }
};

/* Cesium代码 */
let viewer = null;
const title = "书签管理";
const btnArray = ref(["新增", "删除"]);

const initCesium = () => {
  const options = {
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
    selectionIndicator: false,
    infoBox: false,
    scene3DOnly: true,
    contextOptions: {
      webgl: {
        alpha: true,
        depth: true,
        stencil: true,
        antialias: true,
        premultipliedAlpha: true,
        preserveDrawingBuffer: true,
        failIfMajorPerformanceCaveat: true
      },
      allowTextureFilterAnisotropic: true,
      requestWebgl1: true
    },
    baseLayer: Cesium.ImageryLayer.fromProviderAsync(
      Cesium.TileMapServiceImageryProvider.fromUrl(
        Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
      )
    )
  };

  viewer = new Cesium.Viewer("cesium-container", options);
  //视角跳转
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(113.624802, 34.743841, 1000000.0)
  });
};

onMounted(() => {
  initCesium();
});

//场景截图
const tableData = ref([]);
const visible = ref(false);
let imageSrc = ref("");
let date = "";
let delArr = [];
let cameraPosition = null,
  cameraHpr = null;
const staBtn = () => {
  visible.value = true;
  let image = new Image();
  viewer.render();
  image = viewer.scene.canvas.toDataURL("image/png");
  date = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
  imageSrc.value = image;
};
const submit = () => {
  visible.value = false;
  cameraPosition = viewer.scene.camera.positionWC;
  cameraHpr = {
    heading: viewer.scene.camera.heading,
    pitch: viewer.scene.camera.pitch,
    roll: viewer.scene.camera.roll
  };
  tableData.value.push({
    id: uuidv4(),
    imgUrl: imageSrc.value,
    label: "场景",
    date: date,
    loc: {
      position: cameraPosition,
      cameraHpr: cameraHpr
    }
  });
};

const handlerSelect = (payload) => {
  delArr = [...payload];
};
const sliChange = (e) => {};
const cloBtn = () => {
  delArr.forEach((e) => {
    let findIndex = tableData.value.findIndex((i) => {
      return e.id == i.id;
    });
    if (findIndex != -1) {
      tableData.value.splice(findIndex, 1);
    }
  });
};
//定位
// const site = (e) => {
//   viewer.camera.flyTo({
//     destination: e.loc.position
//   });
// };
onUnmounted(() => {
  viewer.destroy();
});
</script>

<style scoped lang="scss">
.content-box {
  display: flex;
  width: 100vw;
  height: 100vh;
  .box-code {
    width: 500px;
    height: 100%;
  }
  .box-cesium {
    width: calc(100% - 500px);
    height: 100%;
    overflow: hidden;
    .cesium-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 39px;
      padding: 0 10px;
      .header-title {
        margin: auto;
      }
    }
    #cesium-container {
      position: relative;
      width: 100%;
      height: calc(100% - 39px);
    }
  }
}
</style>

<style scoped>
:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__content) {
  padding: 0 !important;
}

:deep(.el-tabs--border-card) {
  border: 0 !important;
}
</style>
